<script setup lang="ts">

import {ResourceContentApi, ResourceContentVO} from "@/api/resource/content";
import {ResourceGroupApi, ResourceGroupTreeVO} from "@/api/resource/group";
import {ResourceType} from "@/types/resource";

const message = useMessage()
const emit = defineEmits(['selected'])

const show = ref(false)
const loading = ref(false)

const treeList = ref<ResourceGroupTreeVO[]>([])
const contentList = ref<ResourceContentVO[]>([])

// TODO 很奇怪，这里又变成了非数组？
const selectIds = ref<number>()
const selectId = computed(() => {
  // return selectIds.value?.at(-1)
  return selectIds.value
})
const selectContent = computed(() => contentList.value!.filter(content => content.groupId === selectId.value)!)

const cascaderProps = {
  value: 'id',
  label: 'name',
  children: 'groupChild',
  checkStrictly: true,
  emitPath: false,
}

/** 打开窗口 */
const open = () => {
  show.value = true

  if (!treeList.value?.length || !contentList.value?.length) {
    getList()
  }
}
defineExpose({open})

/** 关闭 */
const close = () => {
  currentAudio.value = undefined
  showAudio.value = false
  show.value = false
}

/** 获取数据 */
const getList = async () => {
  loading.value = true

  treeList.value = await ResourceGroupApi.getResourceGroupContentTreeList(ResourceType.AUDIO)
  contentList.value = await ResourceContentApi.getResourceList(ResourceType.AUDIO)

  loading.value = false
}

/** 点击图片 */
// 当前图片
const currentAudio = ref<ResourceContentVO>()
const showAudio = ref(false)
const handleClick = (item: ResourceContentVO) => {
  currentAudio.value = item
}

// 选择图片
const handleSelect = async () => {
  try {
    await message.confirm('确定要选择该音频吗?', '选择音频', 'info')
    emit('selected', currentAudio.value)
    close()
  } catch {}
}

</script>

<template>
  <Dialog
    v-model="show"
    title="选择图片"
    width="75%"
    :destroy-on-close="false"
  >
    <div v-loading="loading">
      <el-scrollbar max-height="600">
        <el-row :gutter="16">
          <el-col :span="20">
            <ContentWrap>
<!--              <el-empty v-if="!selectIds?.length" description="暂无数据" />-->
              <el-empty v-if="!selectContent.length" description="暂无数据" />
              <el-row v-else :gutter="8">
                <el-col
                  v-for="item in selectContent"
                  :key="item.id"
                  :span="8"
                >
                  <el-card :body-style="{ padding: '4px' }" @click="handleClick(item)">
                    <audio class="w-full" :src="item.url" controls></audio>
                    <el-space class="p-2" direction="vertical" alignment="normal">
                      <el-text size="large">{{ item.name }}</el-text>
                      <el-text type="info">{{ item.remark }}</el-text>
                    </el-space>
                  </el-card>
                </el-col>
              </el-row>
            </ContentWrap>
          </el-col>
          <el-col :span="4">
            <el-button
              class="w-full mb-4"
              v-loading="loading"
              type="primary"
              @click="getList"
            >
              刷新
            </el-button>
            <ContentWrap>
              <el-cascader
                class="w-full"
                v-model="selectIds"
                :options="treeList"
                :props="cascaderProps"
                placeholder="请选择分组"
                clearable
              />
            </ContentWrap>
            <ContentWrap v-if="currentAudio">
              <el-space class="p-2" direction="vertical" alignment="normal">
                <el-text size="large">{{ currentAudio.name }}</el-text>
                <el-text type="info">{{ currentAudio.remark }}</el-text>
              </el-space>
            </ContentWrap>
            <ContentWrap v-if="currentAudio">
              <el-button type="primary" @click="handleSelect">选择</el-button>
            </ContentWrap>
          </el-col>
        </el-row>
      </el-scrollbar>
    </div>
  </Dialog>
</template>

<style scoped lang="scss">

</style>
